﻿<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>积分商城</title>
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1">
  <link href="/shop/templates/yeshou/css/swiper-3.2.7.min.css" rel="stylesheet" />
  <style type="text/css">
    html {
      font-family: 'Microsoft YaHei';
      -ms-text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%;
    }

    * {
      margin: 0;
      padding: 0;
    }

    ol, ul {
      list-style: none;
    }

    a {
      text-decoration: none;
      color: #444;
    }

    .header {
      height: 45px;
      background-color: rgba(255,68,0,1);
      padding: 0 15px;
      line-height: 45px;
    }

      .header .bar {
        text-align: center;
        font-size: 19px;
        color: #fff;
        position: relative;
        height: 45px;
      }

        .header .bar .callback {
          display: block;
          position: absolute;
          height: 12px;
          width: 12px;
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          border: 2px solid #fff;
          top: 12px;
          border-right-color: #ff4400;
          border-top-color: #ff4400;
        }

    .slide-bar {
      height: 210px;
      width: 100%;
    }

      .slide-bar img {
        height: 210px;
        width: 100%;
      }

    .main {
      background-color: #fff;
      margin: 10px 0 0;
      padding: 0 10px;
    }

    .title-list {
      width: 100%;
      overflow: hidden;
      height: 45px;
      position: relative;
      margin: 0 auto 10px;
    }

      .title-list ul {
        width: 1000px;
        height: 44px;
        position: absolute;
        left: 0;
        top: 0;
        border-bottom: 1px solid #e5e5e5;
      }

        .title-list ul li {
          float: left;
          margin: 0 20px 0 0;
          height: 44px;
          line-height: 44px;
          font-size: 16px;
          border-bottom: 1px solid #e5e5e5;
        }

          .title-list ul li.selected {
            color: #ff4400;
            border-bottom-color: #ff4400;
          }

    .goods-list, .goods-list ul {
      width: 100%;
      overflow: hidden;
    }

      .goods-list ul li {
        width: 145px;
        height: 251px;
        overflow: hidden;
        float: left;
        margin: 0 3% 0 0;
      }

    @media screen and (min-width: 330px) {
      .goods-list ul li {
        margin: 0 15px;
      }
    }

    @media screen and (min-width: 390px) {
      .goods-list ul li {
        margin: 0 25px;
      }
    }

    .goods-list ul li .img-wapper {
      display: block;
      width: 142px;
      height: 169px;
      border: 1px solid #e1e1e1;
    }

    .goods-list ul li img {
      width: 142px;
      height: 169px;
    }

    .goods-list .info {
      font-size: 13px;
      line-height: 18px;
      padding: 6px 0 0;
    }

      .goods-list .info a {
        display: block;
        height: 18px;
        overflow: hidden;
        margin: 0 0 6px;
      }

      .goods-list .info span {
        line-height: 15px;
        color: #ff4400;
        font-weight: bold;
      }

    .hidden {
      display: none;
    }
  </style>
  <script src="/shop/templates/yeshou/js/jquery-2.0.2.min.js"></script>
  <script>
    function getselected(i) {
      var j = '1';
      if (i == '1') {
        j = '2';
      }
      $('#li' + i).addClass("selected");
      $('#goodslist' + i).removeClass("hidden");
      $('#li' + j).removeClass("selected");
      $('#goodslist' + j).addClass("hidden");
    }
  </script>
</head>
<body>
  <div class="header">
    <div class="bar">积分商城</div>
  </div>

  <div class="slide-bar">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <vt:function var="hdp" method="getHdp" type="$this" rows="10" />
        <vt:foreach from="$hdp" item="p" index="i">
          <div class="swiper-slide">
            <a href="{$p.bannerLinkUrl}">
              <img src="{$p.bannerPicUrl}" alt="" />
            </a>
          </div>
        </vt:foreach>
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <!--精选-->
    <div class="main">
      <div class="title-list">
        <ul>
          <li id="li1" onclick="getselected('1');" class="selected">全部商品</li>
          <li id="li2" onclick="getselected('2');">最新上架</li>
        </ul>
      </div>
      <div id="goodslist1" class="goods-list">
        <ul>
          <vt:function var="hdp" method="GetRewardProducts" type="$this" rows="4" />
          <vt:foreach from="$hdp" item="p" index="i">
            <li>
              <a href="{$p.link_url}" class="img-wapper">
                <img src="{$p.productpic}" alt="" />
              </a>
              <div class="info">
                <a href="{$p.link_url}">{$p.productName}</a>
                <span>{$p.salePrice}积分</span>
              </div>
            </li>
          </vt:foreach>
        </ul>
      </div>

      <!--end精选-->
      <!--新品-->
      <div id="goodslist2" class="goods-list hidden">
        <ul>
          <vt:function var="hdp" method="GetLatestRewardProducts" type="$this" rows="4" />
          <vt:foreach from="$hdp" item="p" index="i">
            <li>
              <a href="{$p.link_url}" class="img-wapper">
                <img src="{$p.productpic}" alt="" />
              </a>
              <div class="info">
                <a href="{$p.link_url}">{$p.productName}</a>
                <span>{$p.salePrice}积分</span>
              </div>
            </li>
          </vt:foreach>
        </ul>
      </div>
      <!--end新品-->

    </div>
    <!--<div class="server-phone">客服电话：{$shopconfig.tel}</div>-->
  </div>
  <script src="/shop/templates/yeshou/js/swiper-3.2.7.min.js"></script>
  <script type="text/javascript">
    var mySwiper = new Swiper('.swiper-container', {
      loop: true,
      // 分页器
      pagination: '.swiper-pagination'
    })
  </script>
</body>
</html>
<!--1e2124dd04e11d01b9df2865f85944be-->